<style lang='scss' scoped>
@import '@/assets/css/index';
.game11 {
	@include page();
	.wrapper{
		display: flex;
    flex-direction: column;
    flex:1;
      .text {
        color: #786d6a;
        position: absolute;
        left: 12%;
        top: 9%;
        width: 26rem;
        height: 10rem;
        font-size: 18px;
        font-weight: 600;
        z-index: 999;
        line-height: 27px;
        text-align: center;
      }
		.contentBox{
			@include contentBox();

      .master_pic{
        position: absolute;
				width: 21rem !important;
				height: 25.7rem !important;
				bottom: 12rem;
      }
      .jiafa{
        position: absolute;
        width: 9rem !important;
        height: 10rem !important;
        bottom: 29.5rem;
        left: 2rem;
        z-index: 99;
      }
      .dis{
        position: absolute;
        width: 9rem !important;
        height: 10rem !important;
        bottom: 29.5rem;
        left: 2rem;
      }
      .bottle{
        position: absolute;
        width: 100% !important;
        height: 18rem !important;
        bottom: 44%;
        right: 0;
      }
      .water{
        position: absolute;
        width: 9rem !important;
        height: 10rem !important;
        top: 5%;
        left: 13rem;
        z-index: 10;
      }
      .waterTarget{
        position: absolute;
         width: 9rem !important;
				height: 10rem !important;
         bottom: 10%;
         left: 6rem;
        opacity : 0;
      }
      .duck{
        position: absolute;
        width: 9rem !important;
        height: 10rem !important;
        bottom: 26%;
        left: 4rem;
        z-index: 11;
      }
      .stone{
        position: absolute;
        width: 9rem !important;
        height: 10rem !important;
        bottom: 59%;
        right: 2rem;

      }
      .inputBox{
        position: absolute;
				width: 15rem !important;
				height: 4rem !important;
				bottom: 5%;
        background-color: green;
        color:white;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 18px;
        border-radius: 0.8rem;
        input{
          background-color: transparent;
          text-align: center;
          width: 15rem;
          border: none;
          outline: none;
          &::-webkit-input-placeholder{
            color:#999;
          }
          &::-moz-placeholder{   /* Mozilla Firefox 19+ */
              color:#999;
          }
          &:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
              color:#999;
          }
          &:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
              color:#999;
          }
        }
      }
		}
	}
}

</style>
<template>
  <div class="game11" ref="game">
		<div class="wrapper">
			<myheader :passInfo="passInfo"></myheader>
      <div class="text">猴子1分钟摘2个菠萝<br/>它在树上10分钟可以摘几个菠萝？</div>
			<div class="contentBox">
        <div class="inputBox" ref="inputBox" :style="{left:zsMarginLeft+'px'}">
          <!-- <div v-if="showText">请输入整数</div> -->
          <input type="text" ref="inputhearNum" v-model="hearNum" v-on:keyup="inputTargetValue" placeholder="请输入答案" @blur="blurInput">
        </div>
        <img class="bottle" ref="bottle"
					src="../../../assets/img/g11/pic.png">
			</div>
		</div>
  </div>
</template>

<script>
import myheader from './header2.vue'
import {mapState} from 'vuex'
export default {
  name: 'game11',
  components: {
		myheader
  },
  data() {
    return {
      hearNum: '',
      showText:true,
      coordinate: {
        client:{},
        elePosition: {},
      },
      zsMarginLeft: 10,
      jiafaMarginLeft: 10,
      marginLeft: 10,
      passInfo:''
    }
  },
  created () {
    this.$store.commit("setIsPass",false)
    //在页面链接中获取到当前是第几关
    const ji = this.$route.query.ji
    this.passInfo = {
      ji:ji,
      text: '',
      tip: '菠萝不是张在树上的，所以是0个'
    }
    document.title = `第${ji}关`
  },
  computed: {
    ...mapState(['fivepass'])
  },
  mounted() {
    
    console.log("this.$route.query.ji",this.$route.query.ji)

    // this.setjiafaPosition()
    // this.setRenPosition()
    this.setInputBoxPosition()  
  },
  methods: {
    clickInputBox() {
      this.showText = false
      this.$refs.inputhearNum.focus
    },
    inputTargetValue: function(e){
      console.log(e.target.value)
      this.hearNum = e.target.value
    },
    changeInput(e) {
      console.log(e,this.hearNum)
    },
    input(e) {
      // console.log(e)
    },
    blurInput() {
      console.log("blurInput")
      if(this.hearNum==0){
        // 通过关卡
        this.$store.commit("setIsPass",true)
      }else{
        alert("答案不对!")
      }
    },
    touchstartHandle(refName, e) {
			// 阻止事件冒泡到DOM树上
    	e.stopPropagation();
		  let element = e.targetTouches[0]
		  // 记录点击的坐标
		  this.coordinate.client = {
			  x: element.clientX,
			  y: element.clientY
		  }
		  // 记录需要移动的元素坐标
		  this.coordinate.elePosition.left = this.$refs[refName].offsetLeft
		  this.coordinate.elePosition.top = this.$refs[refName].offsetTop
	  },
    touchmoveHandle(refName, e) {
			// 阻止事件冒泡到DOM树上
    	e.stopPropagation();
		  let element = e.targetTouches[0]
		  // 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
		  let x = this.coordinate.elePosition.left + (element.clientX - this.coordinate.client.x)
		  let y = this.coordinate.elePosition.top + (element.clientY - this.coordinate.client.y)
		  // 限制可移动距离，不超出可视区域
		  x = x <= 0 ? 0 : x >= innerWidth - this.$refs[refName].offsetWidth ? innerWidth - this.$refs[refName].offsetWidth : x
		  y = y <= 0 ? 0 : y >= innerHeight - this.$refs[refName].offsetHeight ? innerHeight - this.$refs[refName].offsetHeight : y
		  // 移动当前元素
		  this.$refs[refName].style.left = x + 'px'
		  this.$refs[refName].style.top = y + 'px'
	  },
    setjiafaPosition() {
      const element = this.$refs["jiafa"]
      // master_pic 宽高
      const width = element.clientWidth
      const height = element.clientHeight
      console.log(width,height)
      // 屏幕宽度
      const screenWidth = window.screen.width
      console.log('screenWidth',screenWidth)
      const marginLeft = (screenWidth - width)/2
      console.log('marginLeft',marginLeft)
      this.jiafaMarginLeft = marginLeft
    },
    setRenPosition() {
      const element = this.$refs["master_pic"]
      // master_pic 宽高
      const width = element.clientWidth
      const height = element.clientHeight
      console.log(width,height)
      // 屏幕宽度
      const screenWidth = window.screen.width
      console.log('screenWidth',screenWidth)
      const marginLeft = (screenWidth - width)/2
      console.log('marginLeft',marginLeft)
      this.marginLeft = marginLeft
    },
    setInputBoxPosition() {
      const element = this.$refs["inputBox"]
      console.log('setInputBoxPosition',element)
      // master_pic 宽高
      const width = element.clientWidth
      const height = element.clientHeight
      console.log(width,height)
      // 屏幕宽度
      const screenWidth = window.screen.width
      console.log('screenWidth',screenWidth)
      const marginLeft = (screenWidth - width)/2
      console.log('zsMarginLeft',marginLeft)
      this.zsMarginLeft = marginLeft
    },
	  clickMasterPic(e) {
      console.log(e.layerX,e.layerY)
        if(e.layerX>=this.coordinate.targetScope.x[0]&&e.layerX<=this.coordinate.targetScope.x[1]){
          if(e.layerY>=this.coordinate.targetScope.y[0]&&e.layerY<=this.coordinate.targetScope.y[1]){
            // 通过关卡
            this.$store.commit("setIsPass",true)
            console.log("isPass",this.$store.state.isPass)
          }  
        }
    }
	}
}
</script>
